import { Card, PageHeader, Input, Row, Button, Radio } from 'antd';
import React from 'react';

const { TextArea } = Input;

export default class Problem extends React.Component {
  problemDescription = '';
  problemAnswer = '';
  problems: { description?: string; options?: string[]; answer?: string }[] = [];

  state: {
    problems: { description?: string; options?: string[]; answer?: string }[];
    creating: boolean;
    showAnswer: boolean;
  } = {
    problems: [],
    creating: true,
    showAnswer: false,
  };

  handleDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const target = event.target as HTMLTextAreaElement;
    this.problemDescription = target.value;
  };

  handleAnswerChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const target = event.target as HTMLTextAreaElement;
    this.problemAnswer = target.value;
  };

  problemGenerate = () => {
    this.problems = [];

    const descriptions = this.problemDescription.split('\n');
    let problem: { description?: string; options?: string[]; answer?: string } = {};
    let isFirstHit = true;
    descriptions.forEach((des) => {
      if (des.length === 0) return;
      else if (des[0] >= '0' && des[0] <= '9') {
        if (isFirstHit) {
          isFirstHit = false;
        } else {
          this.problems.push(problem);
        }
        problem = { description: des, options: [] };
      } else if (des[0] >= 'A' && des[0] <= 'Z') {
        problem.options?.push(des);
      }
    });
    this.problems.push(problem);

    this.problemAnswer
      .split('')
      .filter((str) => str.length && str[0] >= 'A' && str[0] <= 'Z')
      .forEach((answer, index) => {
        this.problems[index].answer = answer;
      });

    this.setState({ creating: false, problems: this.problems });
    console.log(this.problems);
  };

  render() {
    return (
      <>
        {this.state.creating ? (
          <Card>
            <PageHeader title="题目生成器" subTitle="可用于自习的题目生成器" />
            <Row>
              <TextArea
                style={{ width: '50%', height: '400px', resize: 'none' }}
                onChange={this.handleDescriptionChange}
              ></TextArea>
              <TextArea
                style={{ width: '50%', height: '400px', resize: 'none' }}
                onChange={this.handleAnswerChange}
              ></TextArea>
            </Row>
            <Button onClick={this.problemGenerate}>生成</Button>
          </Card>
        ) : (
          <>
            <PageHeader
              onBack={() => {
                this.setState({ creating: true });
              }}
              title="题目生成器"
              subTitle="可用于自习的题目生成器"
            />
            {this.state.problems.map((problem) => {
              return (
                <Card title={problem.description} bordered={true}>
                  <Radio.Group>
                    {problem.options?.map((option, index) => (
                      <Radio
                        style={{
                          display: 'block',
                          height: '30px',
                          lineHeight: '30px',
                          color:
                            this.state.showAnswer && problem.answer !== problem.options![index][0]
                              ? 'red'
                              : 'black',
                        }}
                        value={index}
                      >
                        {option}
                      </Radio>
                    ))}
                  </Radio.Group>
                </Card>
              );
            })}
            <Button
              onClick={() => {
                this.setState({ showAnswer: !this.state.showAnswer });
              }}
            >
              显示/隐藏答案
            </Button>
          </>
        )}
      </>
    );
  }
}
